import { createUseStyles } from "react-jss";

interface Props {
  fontSize?: number;
  radius?: number;
  outline?: boolean;
  color?: string;
  disabled?: boolean;
}

const useStyles = createUseStyles({
  dynamic: ({
    fontSize,
    radius = 2,
    outline,
    color = "rgb(64, 147, 224)",
    disabled,
  }: Props) => {
    const style = {
      fontSize: fontSize ?? "inherit",
      borderRadius: radius + "px",
    };

    let extra = {};

    if (outline) {
      if (disabled) {
        extra = {
          borderWidth: "1px",
          borderStyle: "solid",
          color: "#d9d9d9",
          backgroundColor: "transparent",
          "&:hover": {
            cursor: "not-allowed",
          },
        };
      } else {
        extra = {
          borderWidth: "1px",
          borderStyle: "solid",
          color: color,
          backgroundColor: "transparent",
        };
      }
    } else {
      if (disabled) {
        extra = {
          backgroundColor: "#d9d9d9",
          border: "1px solid transparent",
          color: "#ffffff",
          "&:hover": {
            cursor: "not-allowed",
          },
        };
      } else {
        extra = {
          color: "#ffffff",
          backgroundColor: color,
          border: "1px solid transparent",
        };
      }
    }

    return Object.assign(style, extra);
  },

  label: {
    boxSizing: "border-box",
    padding: "0px 8px",
    border: "none",
    backgroundColor: "transparent",
    display: "inline-block",
    /* display: inline-block 会引起同一行上下错误问问题，
    因为默认的 vertical-align 属性是 baseline, 
    带有 ellipse 属性的元素 baseline 是 top 
    不带 ellipse 属性的元素 baseline 是 bottom 
    */
    verticalAlign: "bottom",
    lineHeight: "16px",
    wordBreak: "break-all",
  },
  ellipsis: {
    maxWidth: "130px",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
    overflow: "hidden",
    wordBreak: "break-all",
  },
});

export { useStyles };
